<template>
  <!-- shopping cart -->
  <div class="shopping-cart">
    <heading-title title="Shopping Cart" />
    <div class="shopping-container">
      <el-row :gutter="25">
        <el-col :lg="16" :md="24">
          <div
            class="shopping-cart-item"
            v-for="item in productList"
            :key="item.id"
          >
            <el-image
              style="width: 120px; height: 134px"
              :src="item.src"
            ></el-image>
            <div class="cart-info">
              <p>{{ item.name }}</p>
              <p>{{ "SELECT SIZE：44" }}</p>
              <p>{{ "Qty：" + item.qty }}</p>
            </div>
            <p class="cart-price">{{ "$" + item.price }}</p>
            <div>
              <span>{{ "Remove item" }}</span>
            </div>
          </div>
          <div class="continue-shopping">
            <div>{{ "Continue Shopping" }}</div>
            <p>{{ "Update Shopping Cart" }}</p>
          </div>
        </el-col>
        <el-col :lg="8" :md="24">
          <p class="shopping-cart-title">{{ "SUMMARY" }}</p>
          <div class="right-box">
            <div
              class="right-container"
              v-for="(item, index) in addressList"
              :key="item.id"
							:class="addressIndex === index? 'active': ''"
							@click="countryChange(item, index)"
            >
              <p>
                <span>{{ item.firstname }}</span>
                <span>{{ item.lastname }}</span>
              </p>
              <p>{{ item.street[0] }}</p>
              <p>
                <span>{{ item.city + "，" }}</span>
                <span>{{ item.region.region }}</span>
                <span>{{ item.postcode }}</span>
              </p>
              <p>{{ item.country_id }}</p>
              <p>{{ item.telephone }}</p>
            </div>
            <div class="dis-bettween bottom-title">
              <p>{{ "Subtotal" }}</p>
              <span>{{ "$" + priceTotal }}</span>
            </div>
            <div class="dis-bettween bottom-title">
              <p>{{ "Shipping (" + baseInfo.carrier_title + "-" + baseInfo.method_title + ")" }}</p>
              <span>{{ "$" + baseInfo.base_amount }}</span>
            </div>
            <div class="dis-bettween bottom-title">
              <p>{{ "Order Total" }}</p>
              <span>{{ "$" + (priceTotal + baseInfo.base_amount) }}</span>
            </div>
            <p class="bottom-title">
              {{ "Zip/Postal Code" }}
              <i
                style="cursor: pointer"
                :class="isCode ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                @click="isCode = !isCode"
              ></i>
            </p>
            <input v-model="info.password" type="type" v-show="isCode" />
            <div class="btn normal" v-show="isCode">{{ "Apply Discount" }}</div>
            <div class="btn"  @click="submit">
              {{ "Proceed to Checkout" }}
            </div>
            <p class="btn-text">{{ "Check Out with Multiple Addresses" }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
let axios = require("axios");
export default {
  name: "",
  props: [""],
  data() {
    return {
      options: [],
      city: [],
      value: "",
      info: {
        value: ""
      },
      isTop: true,
      isCode: false,
			addressIndex: -1,
			baseInfo: {},
			baseAddress: {},
    };
  },

  components: {
    HeadingTitle: () => import("_c/HeadingTitle")
  },

  computed: {
    ...mapGetters(["productList", "token", "priceTotal", "addressList"]),
    isCity() {
      if (Array.prototype.isPrototypeOf(this.city) && this.city.length !== 0)
        return true;
      return false;
    }
  },

  mounted() {
    this.countryChange(this.addressList[0], 0);
    // this.loadCountries();
  },

  methods: {
    async countryChange(row, index) {
			if (this.addressIndex === index) return;
			this.addressIndex = index;
			this.baseAddress = row;
      let data = JSON.stringify({ addressId: row.id });
      let config = {
        method: "post",
        url:
          "http://47.119.123.183/rest/V1/carts/mine/estimate-shipping-methods-by-address-id",
        headers: {
          Authorization: "Bearer " + this.token,
          "Content-Type": "application/json",
        },
        data: data
      };
      axios(config)
        .then(res => {
					this.baseInfo = res.data[0];
          // console.log(res);
        })
        .catch(() => {});
    },
		submit() {
			let obj = {
				addressInformation: {
					shipping_address: {
						region: this.baseAddress.region.region,
						region_id: this.baseAddress.region.region_id,
						region_code: this.baseAddress.region.region_code,
						country_id: this.baseAddress.country_id,
						postcode: this.baseAddress.postcode,
						city: this.baseAddress.city,
						firstname: this.baseAddress.firstname,
						lastname: this.baseAddress.lastname,
						email: this.baseAddress.email,
						telephone: this.baseAddress.telephone,
						street: this.baseAddress.street
					},
					shipping_carrier_code: this.baseInfo.carrier_code,
					shipping_method_code: this.baseInfo.carrier_code,
				}
			}
			this.$store.commit('product/SET_ADDRESSINFORMATION', obj)
			this.$router.push('/checkout');
		}
  }
};
</script>
<style lang="scss" scoped>
.shopping-container {
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
  input {
    width: 100%;
    height: 30px;
    border: 0;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 10px;
    outline: 0;
    font-size: 14px;
    color: #000;
    padding: 5px 0;
    border-radius: 5px;
    &:focus {
      border-bottom-color: #1a1a1a;
    }
  }

  .shopping-cart-item {
    display: flex;
    height: 164px;
    align-items: center;
    font-family: "Red Hat Display", sans-serif;
    color: #333;
    font-size: 14px;
    padding-bottom: 30px;
    margin-bottom: 20px;
    border-bottom: 1px solid #d1d1d1;
    p {
      margin: 0;
    }

    .cart-info {
      width: 280px;
      height: 134px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 20px;
    }

    .cart-price {
      width: 250px;
    }
  }
  .continue-shopping {
    display: flex;
    justify-content: space-between;
    font-weight: 400;
    font-size: 14px;
    & > div {
      width: 230px;
      height: 52px;
      line-height: 52px;
      background-color: #1a1a1a;
      border: 1px solid #e2e2e2;
      min-width: 168px;
      letter-spacing: 0.5px;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }
    p {
      margin: 0;
      color: #969696;
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .shopping-cart-title {
    font-size: 16px;
    text-transform: uppercase;
    font-family: "Red Hat Display", sans-serif;
    font-weight: 700;
    text-align: left;
    color: #1a1a1a;
    border-bottom: 1px solid transparent;
    padding-bottom: 30px;
    margin-top: 0;
    margin-bottom: 0;
  }
  p {
    margin: 0;
  }
  .right-container {
		cursor: pointer;
    border: 1px solid #ddd;
    padding: 15px 10px 7px;

		&.active {
			border-color: #233453;
		}
  }
  .dis-bettween {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .right-box {
    font-size: 14px;
    font-weight: 400;
    color: #1a1a1a;

    p.enter {
      font-size: 12px;
      padding: 15px 0;
    }

    p.right-top-title {
      margin-bottom: 15px;
      margin-top: 10px;
    }

    .bottom-title {
      height: 40px;
      align-items: center;
    }

    .btn {
      height: 52px;
      line-height: 52px;
      text-align: center;
      background: #1a1a1a;
      color: #fff;
      margin-bottom: 20px;
      border-radius: 5px;
      cursor: pointer;

      &.normal {
        color: #1a1a1a;
        background: #fff;
        border: 1px solid #e1e1e1;
      }
    }
    .btn-text {
      text-align: center;
      cursor: pointer;
      margin-bottom: 30px;
    }
  }
}
</style>
